<template>
  <a-modal
    class="formModal"
    :title="$t('form.updatePlan.title')"
    v-model:open="modalVisible"
    @cancel="close"
    :footer="null"
  >
    <div class="sub_title">{{ $t("form.updatePlan.sub_title") }}</div>
    <a-form ref="formRef" :model="formState">
      <a-form-item
        :label="$t('form.updatePlan.form.item_1.label')"
        name="department_id"
        :rules="[
          {
            required: true,
            message: $t('form.updatePlan.form.item_1.rules.error_1'),
            trigger: 'blur',
          },
        ]"
      >
        <a-select v-model:value="formState.department_id">
          <a-select-option
            :value="item.title"
            v-for="item in gloablStore.departMentList"
            :key="item.id"
          >
            {{ item.title }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        :label="$t('form.updatePlan.form.item_2.label')"
        name="profession_id"
        :rules="[
          {
            required: true,
            message: $t('form.updatePlan.form.item_2.rules.error_1'),
            trigger: 'blur',
          },
        ]"
      >
        <a-select v-model:value="formState.profession_id">
          <a-select-option
            :value="item.title"
            v-for="item in gloablStore.professionList"
            :key="item.id"
          >
            {{ item.title }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        :label="$t('form.updatePlan.form.item_3.label')"
        name="stage_id"
        :rules="[
          {
            required: true,
            message: $t('form.updatePlan.form.item_3.rules.error_1'),
            trigger: 'blur',
          },
        ]"
      >
        <a-select v-model:value="formState.stage_id">
          <a-select-option
            :value="item.title"
            v-for="item in gloablStore.stageList"
            :key="item.id"
          >
            {{ item.title }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
    <div class="footer-btns">
      <a-button @click="close">{{ $t("btnText.cancel") }}</a-button>
      <a-button type="primary" :loading="isSubmitting" @click="submit">{{
        $t("btnText.save")
      }}</a-button>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { getCurrentInstance, ref } from "vue";
import {
  postMemberInfo,
  postUpdateMemberInfo,
  postUpdateMemberOne,
} from "../../../api/member";
import { useMemberStore, useGlobalStore } from "../../../store";
import { message } from "ant-design-vue";
const memberStore = useMemberStore();
const gloablStore = useGlobalStore();
const modalVisible = ref(false);

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

const close = () => {
  modalVisible.value = false;
  formRef.value.resetFields();
};

const initSetCareerData = (
  key: string,
  value: string,
  getIdValue?: boolean
) => {
  let key_value = "";
  if (key == "depart") {
    gloablStore.departMentList?.forEach((item) => {
      if (getIdValue) {
        if (item.title == value) {
          key_value = item.id + "";
        }
      } else {
        if (item.id == parseInt(value)) {
          key_value = item.title;
        }
      }
    });
  }
  if (key == "profession") {
    gloablStore.professionList?.forEach((item) => {
      if (getIdValue) {
        if (item.title == value) {
          key_value = item.id + "";
        }
      } else {
        if (item.id == parseInt(value)) {
          key_value = item.title;
        }
      }
    });
  }
  if (key == "stage") {
    gloablStore.stageList?.forEach((item) => {
      if (getIdValue) {
        if (item.title == value) {
          key_value = item.id + "";
        }
      } else {
        if (item.id == parseInt(value)) {
          key_value = item.title;
        }
      }
    });
  }
  return key_value;
};

const show = () => {
  formState.value.department_id =
    initSetCareerData("depart", memberStore.profile?.department_id!) || "";
  formState.value.profession_id =
    initSetCareerData("profession", memberStore.profile?.profession_id!) || "";
  formState.value.stage_id =
    initSetCareerData("stage", memberStore.profile?.stage_id!) || "";
  modalVisible.value = true;
};

defineExpose({
  close,
  show,
});

// ===============form state================
const formRef = ref();

const formState = ref({
  department_id: "",
  profession_id: "",
  stage_id: "",
});
const isSubmitting = ref(false);
const submit = () => {
  formRef.value.validate().then(async () => {
    let paramsData = {
      department_id: initSetCareerData(
        "depart",
        formState.value.department_id,
        true
      ),
      profession_id: initSetCareerData(
        "profession",
        formState.value.profession_id,
        true
      ),
      stage_id: initSetCareerData("stage", formState.value.stage_id, true),
    };
    isSubmitting.value = true;
    let res = await postUpdateMemberInfo(paramsData);
    if (res.code === 200) {
      let res2 = await postMemberInfo();
      isSubmitting.value = false;
      if (res2.code === 200) {
        Object.assign(memberStore.profile!, res2.data);
        message.success($t("message.changed_success"));
        close();
      } else {
        message.error($t('message.error.update'));
      }
    } else {
      isSubmitting.value = false;
      message.error($t('message.error.update'));
    }
  });
};
</script>
<style scoped lang="less">
.sub_title {
  font-size: 16px;
  color: #36434d;
  margin-bottom: 32px;
}
</style>
